<template>
	<view>
		<!-- 裁切 -->
		<view class="fui-wrap" style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 9999;"
			v-if="isShowTailor">
			<jp-cropper-watermark mode="free" :width="270" :height="398" :maxWidth="1024" :maxHeight="1024"
				:url="TailorSrc" @cancel="isShowTailor = false" @ok="onSubmitTailor"></jp-cropper-watermark>
		</view>

		<view style="padding:20rpx;">
			<view style="margin-bottom:30rpx;" v-for="(item,index) in VipPhotoLabels" :key="index">
				<view class="photoLabels">
					<text style="float:left;">{{ item.LabelName }}</text>
				</view>

				<view style="margin-top: 25rpx;">
					<fui-upload max="3" :url="uploadUrl" :ref="'upload'+index" :fileList="item.photos" radius="5"
						width="210" height="300" @success="uploadSuccess(index,$event)" @error="uploadError"
						@complete="uploadComplete(item.LabelID,$event, item.photos)" Right
						@preview="preview"></fui-upload>
				</view>
			</view>
		</view>

		<button class="sub-btn" @click="backMyPage">保存</button>
		<view class="" style="height: 100rpx;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				VipPhotoLabels: [],
				UserVipPhotos: [],
				uploadUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=vipphoto&type=image',

				// 接收图片
				TailorSrc: '',
				// 是否显示裁切
				isShowTailor: false,
				// 接收图片的列表
				successImageList: [],
				labelID: '',
				uploadUrls: [],
				fileList: [],
				photos: [],
				timer: null,
				imageList: []
			};
		},
		onLoad() {
			this.getVipLabel();
		},
		methods: {
			uploadComplete(label, e, photos) {
				this.successImageList = [];
				// console.log('uploadComplete event', e)
				// return;
				this.uploadUrls = e.urls
				if (e.action == 'choose') {

					this.uploadStatus = e.status
					// console.log('e.url数据', e.urls)
					// console.log('photos数据', photos)

					// 接收 labelID
					this.labelID = label;
					this.photos = photos;


					if (Array.isArray(photos) && photos.length < 3) {
						this.successImageList = e.urls.slice(photos.length);
					} else {
						this.successImageList = e.urls;
					}

					// console.log('successImageList 数据', this.successImageList)
					// 首次赋值
					this.TailorSrc = this.successImageList[0]

					// console.log('TailorSrc 首次赋值', this.TailorSrc)

					if (this.TailorSrc != '') this.isShowTailor = true
				}




				// 删除
				if (e.action == 'delete') {
					this.$httpost('/UserAction/saveMyVipPhoto', {
						labelID: label,
						uploadUrls: this.uploadUrls
					}).then(res => {
						if (res.code == 200) {
							this.getVipLabel()
						}
					});
				}
			},

			// 裁切方法
			onSubmitTailor(filPath) {

				if (this.timer) {
					clearTimeout(this.timer);
					// return false;
				}
				this.timer = setTimeout(async () => {

					// console.log('裁剪结果 filPath', filPath);
					// 处理点击事件
					// console.log('点击事件被触发');
					// 这里可以放置点击后需要执行的代码
					if (this.successImageList.length !== 0) {
						// console.log('判断successImageList', this.successImageList)
						// 取当前裁剪数据的下标
						let successImageListIndex = this.successImageList.indexOf(this.TailorSrc);

						// console.log('successImageListIndex', successImageListIndex)

						this.fileList.push(filPath.path);
						// console.log('this.fileList', this.fileList)
						// 
						// 删除当前已经裁剪过的图片
						this.successImageList.splice(successImageListIndex, 1);

						// 重新赋值裁剪
						this.TailorSrc = this.successImageList[0];

						// console.log('fileList 裁切结果', this.fileList)
					}


					if (this.successImageList.length === 0) {
						// console.log('执行了1')
						// 	// console.log('fileList 结果数据', this.fileList)
						// 	if (Array.isArray(this.photos)) {
						// 		// console.log('执行了2')
						// 		this.fileList = [...this.photos , ...this.fileList];
						// 	} 


						this.fileList.forEach(async item => {
							// console.log('item', item)
							let itemImage = await this.uploadImages(item)

							// console.log('itemImage', itemImage)
							if (itemImage) {
								this.imageList.push(itemImage);
								// console.log('执行了@··11111·', this.imageList)
								if (this.imageList.length == this.fileList.length) {
									// console.log('执行了@···22222')
									let data = await this.saveImage(this.labelID, this.imageList)
									this.getVipLabel()
									uni.hideLoading();
								}
							}
						})

					} else {
						uni.hideLoading();
					}








					// 清除定时器
					this.timer = null;
				}, 1000);
















			},

			uploadImages(tmpFile) {
				uni.showLoading({
					title: '上传中'
				})
				return new Promise((reslove, reject) => {
					uni.uploadFile({
						url: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=image', //仅为示例，非真实的接口地址
						filePath: tmpFile,
						name: "file",
						formData: {},
						success: (uploadFileRes) => {
							reslove(this.$baseUrl + JSON.parse(uploadFileRes.data).fileName)
						}
					})
				})
			},
			saveImage(labelID, uploadUrls) {
				// console.log('uploadUrls222222', uploadUrls)
				return new Promise((reslove, reject) => {
					this.$httpost('/UserAction/saveMyVipPhoto', {
						labelID: labelID,
						uploadUrls: uploadUrls
					}).then(res => {
						if (res.code == 200) {
							reslove()
							this.imageList = [];
							this.fileList = [];
							// console.log('保存成功', JSON.parse(res.data));
						}
					});
				})
			},
			// // 裁切方法
			// onSubmitTailor(filPath) {
			// 	// console.log('裁剪结果 filPath', filPath);

			// 	if (this.timer) {
			// 	    clearTimeout(this.timer);
			// 		// return false;
			// 	}
			// 	this.timer = setTimeout( async () => {
			// 		// 处理点击事件
			// 		// console.log('点击事件被触发');
			// 		// 这里可以放置点击后需要执行的代码
			// 		if (this.successImageList.length !== 0) {
			// 			// console.log('判断successImageList', this.successImageList)
			// 			// 取当前裁剪数据的下标
			// 			let successImageListIndex = this.successImageList.indexOf(this.TailorSrc);

			// 			// console.log('successImageListIndex', successImageListIndex)

			// 			this.fileList.push(filPath.path);
			// 			// console.log('this.fileList', this.fileList)
			// 			// 
			// 			// 删除当前已经裁剪过的图片
			// 			this.successImageList.splice(successImageListIndex, 1);

			// 			// 重新赋值裁剪
			// 			this.TailorSrc = this.successImageList[0];

			// 			// console.log('fileList 裁切结果', this.fileList)
			// 		} 

			// 		if (this.successImageList.length === 0) {
			// 			// console.log('执行了1')
			// 			// console.log('fileList 结果数据', this.fileList)
			// 			if (Array.isArray(this.photos)) {
			// 				// console.log('执行了2')
			// 				this.fileList = [...this.photos , ...this.fileList];
			// 			} 


			// 			this.fileList.forEach(async item => {
			// 				// console.log('item', item)
			// 				this.imageList.push(await this.uploadImages(item))
			// 			})
			// 			// console.log('222222222222222222', this.imageList)
			// 			// return;
			// 			let data = await this.saveImage(this.labelID, this.imageList)
			// 			this.getVipLabel()

			// 			uni.hideLoading();
			// 		} else {
			// 			uni.hideLoading();
			// 		}

			// 		this.imageList = [];
			// 		this.fileList = [];
			// 		// 清除定时器
			// 		this.timer = null;
			// 	}, 1000);
			// },








			preview(event) {
				// console.log("event", event)
			},
			getVipLabel() {
				this.$httpost('/Labels/VipPhotoLabels', {}).then(res => {
					if (res.code == 200) {
						this.VipPhotoLabels = res.data;
						this.isShowTailor = false;
					}
				});
			},

			uploadSuccess(index, e) {
				// console.log(index, e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.uploadStatus = e.status
				if (res.fileName) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的图片地址
					//e.index为图片索引值
					let gv = 'upload' + index;
					this.$refs[gv][0].result(this.$baseUrl + res.fileName, e.index)
				}
			},
			// uploadComplete(label, e) {
			// 	// console.log('e', e);

			// 	this.uploadStatus = e.status
			// 	this.uploadUrls = e.urls

			// if (this.uploadStatus === 'success' && e.action === 'upload') {				
			// 	this.$httpost('/UserAction/saveMyVipPhoto', {
			// 		labelID: label,
			// 		uploadUrls: this.uploadUrls
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			// console.log('保存成功', JSON.parse(res.data.UserVipPhotos));
			// 		}
			// 	});
			// }

			// if (e.action === 'delete') {
			// 	this.$httpost('/UserAction/saveMyVipPhoto', {
			// 		labelID: label,
			// 		uploadUrls: this.uploadUrls
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			// console.log('保存成功', JSON.parse(res.data.UserVipPhotos));
			// 		}
			// 	});
			// }
			// },





			uploadError(e) {
				this.uploadStatus = e.status
			},
			async backMyPage() {
				// let data = await this.uploadImage(this.labelID, this.uploadUrls)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.submitBtn {
		background-color: $globalColor;
		color: #000;
		font-size: 28rpx;
		border: 0rpx solid $globalColor;
		width: 80vw;
		height: 70rpx;
		line-height: 70rpx;
		margin: auto
	}

	.photoLabels {
		height: 40rpx;
		line-height: 40rpx;
		border-bottom: 1rpx solid #e0e0e0;
		padding: 20rpx;
	}
</style>